<template>
  <table
    data-type="table"
    contenteditable="true"
    :key="blockData.dataId"
    :data-id="blockData.tableData.dataId"
    :data-block-id="blockData.blockId"
    :data-index="blockData.dataIndex"
    border="1"
    :class="getTableClassName()"
    style="border-collapse: collapse; width: 99.9709%"
    :data-number="blockData.tableData.tableNumber"
    :data-table-annex-number="annexNumber"
    :data-variable-id="blockData.tableData.variableId" 
  >
    <caption :data-id="tableData.captionZh.dataId" class="table_caption zh" data-lang="zh">
      <iframe-checkbox :blockData="blockData" />
      <p class="caption" :data-table-annex-number="annexNumber" :data-number="blockData.tableData.tableNumber">
        {{ tableData.captionZh.title }}
      </p>
      <p class="unit" v-if="typeof zhUnit === 'string'">
        <template v-if="zhUnit.length > 0">{{ zhUnit }}</template>
        <br v-else />
      </p>
    </caption>
    <caption
      v-if="languageType === 'both' && tableData.captionEn"
      :data-id="tableData.captionEn.dataId"
      class="table_caption en"
      data-lang="en"
    >
      <p class="caption" :data-table-annex-number="annexNumber" :data-number="blockData.tableData.tableNumber">
        {{ tableData.captionEn.title }}
      </p>
      <p class="unit" v-if="typeof tableData.captionEn.unit === 'string'">
        <template v-if="tableData.captionEn.unit.length > 0">{{ tableData.captionEn.unit }}</template>
        <br v-else />
      </p>
    </caption>
    <thead v-if="theadVisible" :data-id="tableData.thead.dataId">
      <tr v-for="(tr, trIdx) of tableData.thead.tr" :key="tr.dataId + '' + trIdx" :data-id="tr.dataId">
        <th
          v-for="(th, thIdx) of tr.th"
          :colspan="th.colspan"
          :rowspan="th.rowspan"
          :style="th.style"
          :key="th.dataId + '' + thIdx"
          :data-id="th.dataId"
          :[width]="th.width || null"
          :[height]="th.height || null"
        >
          <template v-for="block of th.blockList">
            <p
              v-if="block.dataType === 'paragraph'"
              data-type="paragraph"
              :key="block.dataId"
              :data-id="block.dataId"
              :data-index="block.dataIndex"
              :data-lang="block.textData.dataLang"
            >
              <template v-for="(i, idx) of block.textData.contentList">
                <template v-if="i.contentType === 'text'">{{ i.content }}</template>
                <sup v-else-if="i.contentType === 'sup'" :key="'sup_' + idx" data-type="sup">{{ i.fullContent }}</sup>
                <sub v-else-if="i.contentType === 'sub'" :key="'sub_' + idx" data-type="sub">{{ i.fullContent }}</sub>
                <span
                  v-else-if="i.contentType === 'footnote'"
                  class="t_footnote"
                  data-type="footnote"
                  :data-id="i.dataId"
                  :data-referred-id="i.dataId"
                  :data-number="i.contentNumber"
                  :data-note="i.content"
                  :title="i.content"
                  :key="idx"
                  >&#8203;</span
                >
                <RefSpan v-else-if="['refdoc', 'refchapter'].indexOf(i.contentType) > -1" :item="i" :key="idx" />
                <IndexSpan v-else-if="i.contentType === 'bizIndex'" :key="idx" :item="i" />
                <img
                  v-else-if="i.contentType === 'inline_formula'"
                  data-type="inline_formula"
                  :key="idx"
                  :data-id="i.dataId"
                  :width="i.formulaData.width"
                  :height="i.formulaData.height"
                  :src="i.formulaData.url"
                  :data-latex="i.formulaData.latex || ''"
                />
                <img
                  v-else-if="i.contentType === 'inline_figure'"
                  data-type="inline_figure"
                  :key="idx"
                  :data-id="i.dataId"
                  :width="i.figureData.attributes.width"
                  :height="i.figureData.attributes.height"
                  :src="i.figureData.attributes.url"
                />
                <FmtSpan v-else-if="i.contentType === 'keyword'" :key="idx" :item="i" />
                <CommonSpan v-else :key="idx" :item="i" />
              </template>
            </p>
          </template>
        </th>
      </tr>
    </thead>
    <tbody v-if="tableData.tbody" :data-id="tableData.tbody.dataId">
      <tr v-for="(tr, trIdx) of tableData.tbody.tr" :key="blockData.dataId + '_tbody_tr_' + trIdx" :data-id="tr.dataId">
        <td
          v-for="td of tr.td"
          :colspan="td.colspan"
          :rowspan="td.rowspan"
          :key="td.dataId"
          :data-id="td.dataId"
          :[width]="td.width || null"
          :[height]="td.height || null"
        >
          <template v-for="block of td.blockList">
            <p
              v-if="block.dataType === 'paragraph'"
              data-type="paragraph"
              :key="block.dataId"
              :data-id="block.textData.dataId"
              :data-block-id="block.blockId"
              :data-index="block.dataIndex"
              :data-lang="block.textData.dataLang"
            >
              <template v-for="(i, idx) of block.textData.contentList">
                <template v-if="i.contentType === 'text'">{{ i.content }}</template>
                <sup v-else-if="i.contentType === 'sup'" :key="'sup_' + idx" data-type="sup">{{ i.fullContent }}</sup>
                <sub v-else-if="i.contentType === 'sub'" :key="'sub_' + idx" data-type="sub">{{ i.fullContent }}</sub>
                <RefSpan
                  v-else-if="i.contentType === 'refdoc' || i.contentType === 'refchapter'"
                  :item="i"
                  :key="idx"
                />
                <span
                  v-else-if="i.contentType === 'table_footnote'"
                  class="table_footnote"
                  data-type="table_footnote"
                  :data-id="i.dataId"
                  :data-number="i.contentNumber"
                  :key="idx"
                  >&#8203;</span
                >
                <IndexSpan v-else-if="i.contentType === 'bizIndex'" :key="idx" :item="i" />
                <img
                  v-else-if="i.contentType === 'inline_formula'"
                  data-type="inline_formula"
                  :key="idx"
                  :data-id="i.dataId"
                  :width="i.formulaData.width"
                  :height="i.formulaData.height"
                  :src="i.formulaData.url"
                  :data-latex="i.formulaData.latex || ''"
                />
                <img
                  v-else-if="i.contentType === 'inline_figure'"
                  data-type="inline_figure"
                  :key="idx"
                  :data-id="i.dataId"
                  :width="i.figureData.attributes.width"
                  :height="i.figureData.attributes.height"
                  :src="i.figureData.attributes.url"
                />
                <FmtSpan v-else-if="i.contentType === 'keyword'" :key="idx" :item="i" />
                <CommonSpan v-else :key="idx" :item="i" />
              </template>
            </p>
          </template>
        </td>
      </tr>
    </tbody>
    <tfoot v-if="tfootVisible" :data-id="tableData.tfoot.dataId">
      <tr
        v-for="(tr, trIdx) of tableData.tfoot.tr"
        :key="blockData.dataId + '_tfoot_tr_' + trIdx"
        :class="getTrClassName(tr)"
        :data-id="tr.dataId"
      >
        <td
          v-for="td of tr.td"
          :colspan="td.colspan"
          :rowspan="td.rowspan"
          :key="td.dataId"
          :data-type="td.dataType"
          :data-id="td.dataId"
          :class="td.dataType"
        >
          <p
            v-for="(note, noteIdx) of td.noteList"
            :key="noteIdx"
            :class="td.dataType + ' ' + note.dataLang"
            :[dataNumber]="note.contentNumber || null"
            :data-id="note.textData.dataId"
            :data-note-id="note.dataId"
            :data-referred-id="note.referredId"
            :data-type="td.dataType"
            :data-lang="note.dataLang"
          >
            <template v-for="(i, idx) of getContentList(note)">
              <template v-if="i.contentType === 'text'">{{ i.content }}</template>
              <sup v-else-if="i.contentType === 'sup'" :key="'sup_' + idx" data-type="sup">{{ i.fullContent }}</sup>
              <sub v-else-if="i.contentType === 'sub'" :key="'sub_' + idx" data-type="sub">{{ i.fullContent }}</sub>
              <RefSpan v-else-if="i.contentType === 'refdoc' || i.contentType === 'refchapter'" :item="i" :key="idx" />
              <span
                v-else-if="i.contentType === 'table_footnote'"
                class="table_footnote"
                data-type="table_footnote"
                :data-id="i.dataId"
                :data-number="i.contentNumber"
                :key="idx"
                >&#8203;</span
              >
              <IndexSpan v-else-if="i.contentType === 'bizIndex'" :key="idx" :item="i" />
              <img
                v-else-if="i.contentType === 'inline_formula'"
                data-type="inline_formula"
                :key="idx"
                :data-id="i.dataId"
                :width="i.formulaData.width"
                :height="i.formulaData.height"
                :src="i.formulaData.url"
                :data-latex="i.formulaData.latex || ''"
              />
              <img
                v-else-if="i.contentType === 'inline_figure'"
                data-type="inline_figure"
                :key="idx"
                :data-id="i.dataId"
                :width="i.figureData.attributes.width"
                :height="i.figureData.attributes.height"
                :src="i.figureData.attributes.url"
              />
              <FmtSpan v-else-if="i.contentType === 'keyword'" :key="idx" :item="i" />
              <CommonSpan v-else :key="idx" :item="i" />
            </template>
          </p>
        </td>
      </tr>
    </tfoot>
  </table>
</template>
<script>
import { mapGetters } from 'vuex'
import IframeCheckbox from '../IframeCheckbox.vue'
import RefSpan from './span/RefSpan.vue'
import CommonSpan from './span/CommonSpan.vue'
import FmtSpan from './span/FormatterSpan.vue'
import IndexSpan from './span/IndexSpan.vue'

export default {
  components: { CommonSpan, RefSpan, FmtSpan, IndexSpan, IframeCheckbox },
  props: {
    blockData: {
      type: Object,
      default() {
        return {
          caption: '',
          thead: { tr: [] },
          tbody: { tr: [] },
          tfoot: { tr: [] }
        }
      }
    },
    annexNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      height: 'height',
      width: 'width',
      dataNumber: 'data-number'
    }
  },
  inject: ['pageType'],
  computed: {
    tableData() {
      return this.blockData.tableData
    },
    theadVisible() {
      return this.tableData.thead?.tr?.length
    },
    tfootVisible() {
      return this.tableData.tfoot?.tr?.length
    },
    zhUnit() {
      // 过滤掉零宽字符，避免删除单位的时候需要删除两次
      const unit = this.tableData.captionZh.unit
      return unit ? unit.replace(/\u200B/g, '') : unit
    },
    ...mapGetters(['languageType'])
  },
  methods: {
    getContentList(note) {
      return note?.textData?.contentList?.slice(1)
    },
    getTrClassName(tr) {
      const dataType = tr.td?.[0]?.dataType || ''
      return dataType ? `tr_${dataType}` : ''
    },
    getTableClassName() {
      const className = this.annexNumber ? 'table-annex' : this.pageType === 'introduction' ? 'table-introduction' : ''
      return `data-content-table ${className}`
    }
  }
}
</script>
